<template>
  <div class="app-container claimType">
    <AppSearchForm
      v-model:filter="filter"
      @handle-search="handleSearch"
      @handle-add="handleAdd"
      @handle-clear="handleClear"
    />
    <PaginationCard
      v-model:currentPage="paginationData.currentPage"
      v-model:pageSize="paginationData.pageSize"
      :load-list="getTableData"
      :total="paginationData.total"
    >
      <AppTable
        v-loading="isLoading"
        :data="tableData"
        :columns="columns"
        border
      />
    </PaginationCard>
    <ClaimTypeForm
      v-model:visible="visible"
      v-model:editId="editId"
      @success="handleSuccess"
    />
  </div>
</template>

<script setup lang="tsx">
import { onMounted, reactive, ref } from 'vue'
import AppSearchForm from '@/components/AppSearchForm/index.vue'
import ClaimTypeForm from './ClaimTypeForm.vue'
import PaginationCard from '@/components/PaginationCard/index.vue'
import AppTable from '@/components/AppTable/index.vue'
import { Check, Close } from '@element-plus/icons-vue'
import { deleteClaimType, pagedClaimTypes } from '@/http/claimType'
import { IClaimType } from '@/http/types/claimTypes'
import AppButtonGroup from '@/components/AppButtonGroup/index.vue'
import { IButtonConfig } from '@/components/AppButtonGroup/type'
import { ElMessageBox } from 'element-plus'

const buttonConfig:IButtonConfig[] = [
  {
    name: '编辑',
    eventName: 'handleEdit',
    type: 'primary',
    isShow: (row:IClaimType) => !row.isStatic
  },
  {
    name: '删除',
    eventName: 'handleDelete',
    type: 'primary'
  }
]
const columns = ref([
  { label: '名称', prop: 'name' },
  { label: '值类型', prop: 'valueTypeAsString' },
  { label: '描述', prop: 'description' },
  { label: '正则', prop: 'regex' },
  {
    label: '必要',
    prop: 'required',
    width: 120,
    render: ({ row }: {row: IClaimType}) => {
      return row.required ? <el-icon color="#009688"><Check /></el-icon> : <el-icon color="#c2185b"><Close /></el-icon>
    }
  },
  {
    label: '是否静态',
    width: 120,
    prop: 'isStatic',
    render: ({ row }: {row:IClaimType}) => {
      return row.isStatic ? <el-icon color="#009688"><Check /></el-icon> : <el-icon color="#c2185b"><Close /></el-icon>
    }
  },
  {
    label: '操作',
    fixed: 'right',
    render: ({ row }:{row:IClaimType}) => {
      return <AppButtonGroup
        rowData = { row }
        buttonConfigs={
          buttonConfig
        }
        onEvent={(eventName:string) => {
          eventName === 'handleDelete' && handleDelete(row)
          eventName === 'handleEdit' && handleEdit(row)
        }}
      >
      </AppButtonGroup>
    }
  }
])

const filter = ref('')
const paginationData = reactive({
  pageSize: 10,
  currentPage: 1,
  total: 0
})
const tableData = ref<IClaimType[]>([])

const isLoading = ref(false)
const getTableData = async () => {
  isLoading.value = true
  const res = await pagedClaimTypes(
    paginationData.currentPage,
    paginationData.pageSize,
    filter.value
  ).finally(() => {
    isLoading.value = false
  })
  tableData.value = res.items
  paginationData.total = res.totalCount
}
const handleSearch = () => {
  paginationData.currentPage = 1
  getTableData()
}

const visible = ref(false)
const handleAdd = () => {
  visible.value = true
}
const handleClear = () => {
  filter.value = ''
  handleSearch()
}

const handleDelete = (row:IClaimType) => {
  const id = row.id
  ElMessageBox.confirm(
    '删除该声明类型, 是否继续?',
    '提示',
    {
      confirmButtonText: '是',
      cancelButtonText: '否',
      type: 'warning'
    }
  )
    .then(async () => {
      await deleteClaimType(id)
      await getTableData()
    })
}

const editId = ref('')
const handleEdit = (row: IClaimType) => {
  editId.value = row.id
  visible.value = true
}

const handleSuccess = () => {
  visible.value = false
  getTableData()
}

onMounted(() => {
  getTableData()
})
</script>

<style scoped>

</style>
